<!--<link href="//unpkg.com/layui@2.8.18/dist/css/layui.css" rel="stylesheet">-->
<script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
<!--<script src="//unpkg.com/layui@2.8.18/dist/layui.js"></script>-->
<script src="__CDN__/assets/dist/xm-select.js"></script>
<div id="loadimg" style="display:none;background-color: #333333;text-align: center;width: 100%;z-index: 999999;position: fixed;opacity: 0.5;top: 0;bottom: 0;left: 0;right: 0;"><img style="vertical-align: middle;margin-top: 15rem;" width="300px" src="__PUBLIC__assets/img/loading.gif" alt=""></div>
<div id="aler" style="display:none;background-color: rgba(51, 51, 51,0.5);text-align: center;width: 100%;z-index: 999;position: fixed;top: 0;bottom: 0;left: 0;right: 0;">
    <div style="vertical-align: middle;width: 38rem;height: 22rem;background-color: #ffffff;margin: 20rem auto;border-radius:3%;">
        <span style="float: right;margin-right: 1rem;margin-top: 1rem;cursor: pointer;" id="dell">
            <img src="__PUBLIC__assets/img/del.png" alt="" width="30px">
        </span>
        <div style="padding-top: 6rem;">生成数量：<input type="text" name="" value="0" id="shu" /></div>
        <div class="btna" style="padding-top: 3rem;">
            <button id="submm" style="width: 11rem;margin-left: 1rem;">随机生成题库</button>
        </div>
    </div>
</div>
<div class="all" id="app" style="background-color: #f2f2f2;">
    <div class="left">
        <div class="item-s">
            <select name="" id="sel1">
                <option value="">--请选择--</option>
                {volist name="list" id="vo"}
                <option value="{$vo.id}">{$vo.name}</option>
                {/volist}
            </select>
            <select name="" id="sel12">
                <option value="">--请选择--</option>

            </select>
            <select name="" id="sel13">
                <option value="">--请选择--</option>

            </select>
            <select name="" id="sel14">
                <option value="">--请选择--</option>

            </select>
        </div>

        <div class="item-x" id="item-x" >

        </div>
    </div>
    <div class="moddle">
        <div class="item-m">
            <div class="wenzi">样题&nbsp;&nbsp;&nbsp;&nbsp;编号：<span id="q_id"></span></div>
            <text id="text1"></text>
            <text id="text2"></text>
            <div class="timu" id="ques">
                <iframe id="myFrame" src="" style="width: 50rem;height: 76rem;"></iframe>
            </div>

        </div>
    </div>
    <div class="right">
        <div class="two">
            <div class="two-item-o">简介</div>
            <div class="two-item-t"><textarea name="describe" id="describe" cols="38" rows="6" >{$papers?$papers.describe:''}</textarea></div>
        </div>

        <div class="four">
            <div class="th-item-f">生成试卷</div>

            <div class="f-i-o">
                <div class="o-o">作业名称</div>
                <input class="o-t-f" type="text" name="title" value="{$papers?$papers.title:''}" id="title" >
            </div>
            <div class="btna">
                <button id="subm" style="margin-left: 2rem;">添加习题</button>
                <button id="sub" style="">{$papers&&$papers.id>0?'修改作业':'生成作业'}</button>
            </div>
        </div>
    </div>
    <div>
        <div class="item-x"  >
            <div><ul id="item-d"></ul></div>
        </div>
        <div class="btna">
            <button id="subb" style="">移除</button>
        </div>
    </div>
    <input type="hidden" id="ck_question" name="" value="">
    <input type="hidden" id="papers_id" name="" value="{$papers?$papers.id:''}">
</div>

<script>
    var ids = [];
    var l = 0;
    function getInfo () {
        var papers_id = $('#papers_id').val();
        $('#loadimg').show();
        $.ajax({
            url:"/abdmin.php/exam/papers_main/getAll",
            method: 'post',
            data: { 'papers_id': papers_id },
            success:function(data) {
                $('#loadimg').hide();
                if(data.code == 100)
                {
                    var list = data.data;
                    var html = '';
                    for (var i = 0; i < list.length; i++)
                    {
                        html += `<li id="ckq` + list[i].id + `" data-id="` + list[i].id + `"> ` + list[i].name + `</li>`;
                        ids[l] = list[i].id;
                        l++;
                    }
                    $('#item-d').append(html);

                    $('.item-x ul li').click(function () {
                        $('.item-x ul li').css('background-color','#ffffff');
                        // $(this).parent().children().css('background-color','#ffffff');
                        $(this).css('background-color','#cccccc');
                        var qid = $(this).attr('data-id');
                        $('#text1').html();
                        $('#text2').html();
                        $('#loadimg').show();
                        $.ajax({
                            url:"/abdmin.php/exam/papers_main/get_view",
                            method: 'post',
                            data: { 'qid': qid },
                            success:function(data) {
                                $('#loadimg').hide();
                                if(data.code == 100)
                                {
                                    $("#ck_question").val(data.data.id);
                                    $("#q_id").html(data.data.id);
                                    $('#text1').html(data.data.kind);
                                    $('#text2').html(data.data.difficulty);
                                    $("#myFrame").attr("src", "/abdmin.php/exam/papers_main/get_views/ids/" + data.data.id);
                                }
                            },
                            error: function(err) {
                                console.log("失败了: " + err);
                            }
                        });
                    });
                }

            },
            error: function(err) {
                console.log("失败了: " + err);
            }
        });
    }
    getInfo();
    $('#subb').click(function () {
        var id = $("#ck_question").val();
        var caq = $("#ckq"+id).parent();
        $("#ckq"+id).remove();
        var ckq = caq.children();
        // console.log(ckq[0].getAttribute('data-id'));
        var leng = ckq.length;

        ids = [];
        for(var j=0; j<leng; j++)
        {
            ids[j] = ckq[j].getAttribute('data-id');
        }
        // console.log(ids);
    });
    $('#sel1').change(function(){
        var cid = $(this).val();
        $('#loadimg').show();
        var hhtml = `<option value="">--请选择--</option>`;
        $('#sel12').html(hhtml);
        $('#sel13').html(hhtml);
        $('#sel14').html(hhtml);
        $.ajax({
            url:"/abdmin.php/exam/papers_main/get_question",
            method: 'post',
            data: { 'cid': cid },
            success:function(data) {
                $("#loadimg").hide();
                if(data.list != [])
                {
                    var html2 = '';
                    var list2 = data.list;
                    for (var j = 0; j < list2.length; j++)
                    {
                        html2 += `<option value="` + list2[j].id + `">` + list2[j].name + `</option>`;
                    }

                    $('#sel12').append(html2);
                }
            },
            error: function(err) {
                console.log("失败了: " + err);
            }
        });
    });

    $('#sel12').change(function(){
        var cid = $(this).val();
        $('#loadimg').show();
        var hhtml = `<option value="">--请选择--</option>`;
        $('#sel13').html(hhtml);
        $('#sel14').html(hhtml);
        $.ajax({
            url:"/abdmin.php/exam/papers_main/get_question",
            method: 'post',
            data: { 'cid': cid },
            success:function(data) {

                $("#loadimg").hide();
                if(data.list != [])
                {
                    var html2 = '';
                    var list2 = data.list;
                    for (var j = 0; j < list2.length; j++)
                    {
                        html2 += `<option value="` + list2[j].id + `">` + list2[j].name + `</option>`;
                    }

                    $('#sel13').append(html2);
                }
            },
            error: function(err) {
                console.log("失败了: " + err);
            }
        });
    });

    $('#sel13').change(function(){

        var cid = $(this).val();
        $('#loadimg').show();
        $('#item-x').html('');
        var hhtml = `<option value="">--请选择--</option>`;
        $('#sel14').html(hhtml);
        $.ajax({
            url:"/abdmin.php/exam/papers_main/get_question",
            method: 'post',
            data: { 'cid': cid },
            success:function(data) {
                $("#loadimg").hide();
                if(data.list != [])
                {
                    var html2 = '';
                    var list2 = data.list;
                    for (var j = 0; j < list2.length; j++)
                    {
                        html2 += `<option value="` + list2[j].id + `">` + list2[j].name + `</option>`;
                    }

                    $('#sel14').append(html2);
                }
                // $('#loadimg').hide();
                // if (data.code == 100)
                // {
                //     var list = data.data;

                //     var html = `<div><ul>`;
                //     for (var i = 0; i < list.length; i++)
                //     {
                //         // ids[i] = list[i].id;
                //         html += `<li data-id="` + list[i].id + `"> ` + list[i].name + `</li>`;
                //     }
                //     html += `</ul></div>`;

                //     $('#item-x').html(html);
                //     $('.item-x ul li').click(function () {
                //         // $(this).parent().children().css('background-color','#ffffff');
                //         $('.item-x ul li').css('background-color','#ffffff');
                //         $(this).css('background-color','#cccccc');
                //         $('#text1').html();
                //         $('#text2').html();
                //         var qid = $(this).attr('data-id');
                //         $('#loadimg').show();
                //         $.ajax({
                //             url:"/abdmin.php/exam/papers_main/get_view",
                //             method: 'post',
                //             data: { 'qid': qid },
                //             success:function(data) {
                //                 $('#loadimg').hide();
                //                 if(data.code == 100)
                //                 {
                //                     $("#ck_question").val(data.data.id);
                //                     $("#q_id").html(data.data.id);
                //                     $('#text1').html(data.data.kind);
                //                     $('#text2').html(data.data.difficulty);
                //                     $("#myFrame").attr("src", "/abdmin.php/exam/papers_main/get_views/ids/" + data.data.id);
                //                 }
                //             },
                //             error: function(err) {
                //                 console.log("失败了: " + err);
                //             }
                //         });
                //     });
                //     // $(".item-x ul li").eq(0).click();

                // }
            },
            error: function(err) {
                console.log("失败了: " + err);
            }
        });
        // console.log(ids);
    });

    $('#sel14').change(function(){
        var cid = $(this).val();
        $('#loadimg').show();
        $('#item-x').html('');
        $.ajax({
            url:"/abdmin.php/exam/papers_main/get_question",
            method: 'post',
            data: { 'cid': cid },
            success:function(data) {
                $('#loadimg').hide();
                if (data.code == 100)
                {
                    var list = data.data;

                    var html = `<div><ul>`;
                    for (var i = 0; i < list.length; i++)
                    {
                        // ids[i] = list[i].id;
                        html += `<li data-id="` + list[i].id + `"> ` + list[i].name + `</li>`;
                    }
                    html += `</ul></div>`;

                    $('#item-x').html(html);
                    $('.item-x ul li').click(function () {
                        // $(this).parent().children().css('background-color','#ffffff');
                        $('.item-x ul li').css('background-color','#ffffff');
                        $(this).css('background-color','#cccccc');
                        $('#text1').html();
                        $('#text2').html();
                        var qid = $(this).attr('data-id');
                        $('#loadimg').show();
                        $.ajax({
                            url:"/abdmin.php/exam/papers_main/get_view",
                            method: 'post',
                            data: { 'qid': qid },
                            success:function(data) {
                                $('#loadimg').hide();
                                if(data.code == 100)
                                {
                                    $("#ck_question").val(data.data.id);
                                    $("#q_id").html(data.data.id);
                                    $('#text1').html(data.data.kind);
                                    $('#text2').html(data.data.difficulty);
                                    $("#myFrame").attr("src", "/abdmin.php/exam/papers_main/get_views/ids/" + data.data.id);
                                }
                            },
                            error: function(err) {
                                console.log("失败了: " + err);
                            }
                        });
                    });
                    // $(".item-x ul li").eq(0).click();

                }
            },
            error: function(err) {
                console.log("失败了: " + err);
            }
        });
        // console.log(ids);
        });

    $('#sub').click(function () {

        if(confirm("确定要修改吗？"))
        {
            // console.log(ids);return;
            if(ids.length > 0)
            {

                var describe = $('#describe').val();

                var title = $('#title').val();
                var papers_id = $('#papers_id').val();

                if(!title)
                {
                    alert('请输入作业名称');
                    return;
                }
                var idss = '';
                for (var i = 0; i < ids.length; i++)
                {
                    idss += ids[i] + ',';
                }
                // console.log(idss);

                $('#loadimg').show();
                $.ajax({
                    url:"/abdmin.php/exam/papers_main/xgsj",
                    method: 'post',
                    data: { 'papers_id': papers_id, 'question_ids': idss , 'title': title, 'describe': describe },
                    success:function(data) {
                        $('#loadimg').hide();
                        if(data.code == 100)
                        {
                            alert('试卷修改成功！');
                            setTimeout(function(){
                                parent.location.reload();
                            }, 300);
                        }

                    },
                    error: function(err) {
                        console.log("失败了: " + err);
                    }
                });

                return;
            }

        }
    });

    $('#subm').click(function () {
        var id = $("#ck_question").val();
        $('#loadimg').show();
        $.ajax({
            url:"/abdmin.php/exam/papers_main/getOne",
            method: 'post',
            data: { 'id': id },
            success:function(data) {
                $('#loadimg').hide();
                if(data.code == 100)
                {
                    var list = data.data;
                    var html = `<li id="ckq` + list.id + `" data-id="` + list.id + `"> ` + list.name + `</li>`;
                    $('#item-d').append(html);
                    ids[l] = list.id;
                    l++;
                    $('.item-x ul li').click(function () {
                        $('.item-x ul li').css('background-color','#ffffff');
                        // $(this).parent().children().css('background-color','#ffffff');
                        $(this).css('background-color','#cccccc');
                        $('#text1').html();
                        $('#text2').html();
                        var qid = $(this).attr('data-id');
                        $('#loadimg').show();
                        $.ajax({
                            url:"/abdmin.php/exam/papers_main/get_view",
                            method: 'post',
                            data: { 'qid': qid },
                            success:function(data) {
                                $('#loadimg').hide();
                                if(data.code == 100)
                                {
                                    $("#ck_question").val(data.data.id);
                                    $("#q_id").html(data.data.id);
                                    $('#text1').html(data.data.kind);
                                    $('#text2').html(data.data.difficulty);
                                    $("#myFrame").attr("src", "/abdmin.php/exam/papers_main/get_views/ids/" + data.data.id);
                                }
                            },
                            error: function(err) {
                                console.log("失败了: " + err);
                            }
                        });
                    });
                }

            },
            error: function(err) {
                console.log("失败了: " + err);
            }
        });
    });


</script>
<style>
    body {
        background-color: #f2f2f2;
    }
    .all {
        display: flex;
        justify-content: space-between;
    }
    .left {
        flex: 0.6;
    }
    .item-s select {
        width: 32rem;
        height: 3rem;
        margin-top: 1.25rem;
        margin-left: 1.25rem;
    }
    .item-x {
        height: 71rem;
        overflow-x: hidden;
        overflow-y: scroll;
        width: 32rem;
        background-color: white;
        border: 1px black solid;
        margin-top: 2rem;
        margin-left: 1.25rem;
    }
    .item-x ul {
        list-style-type: none;
        padding-left: 0;
    }
    .item-x ul li{
        padding-left: 1rem;
        cursor: pointer;
    }
    .item-x9 {
        height: 71rem;
        overflow-x: hidden;
        overflow-y: scroll;
        width: 32rem;
        background-color: white;
        border: 1px black solid;
        margin-top: 2rem;
        margin-left: 1.25rem;
    }
    .item-x9 ul {
        list-style-type: none;
        padding-left: 0;
    }
    .item-x9 ul li{
        padding-left: 1rem;
        cursor: pointer;
        margin-top: 1px;
    }
    .item-m {
        width: 51rem;
        height: 85rem;
        border: #999 solid 1px;
        margin-top: 1.25rem;
        padding-top: 4rem;
    }
    .moddle text {
        margin-left: 2.5rem;
        color: red;
    }
    .timu {
        width: 50rem;
        height: 76rem;
        margin: auto;
        margin-top: 2rem;
        background-color: white;
    }
    .wenzi {
        background-color: #f2f2f2;
        font-weight: 500;
        font-size: 1.1rem;
        margin-top: -2.8rem;
        margin-bottom: 1.25rem;
        width: 30rem;
        margin-left: 0.6rem;
    }
    .one {
        margin-top: 1.25rem;
        width: 32rem;
        height: 18.125rem;
        border: #999 solid 1px;
    }
    .two-item-o {
        background-color: #f2f2f2;
        margin-top: -0.625rem;
        width: 12.5rem;
        margin-left: 0.625rem;
    }
    .two {
        margin-top: 2.5rem;
        width: 32rem;
        height: 18.125rem;
        border: #999 solid 1px;
    }
    .two-item-t {
        color: blue;
        margin-top: 1.25rem;
        margin-left: 1.9rem;
    }
    .three {
        margin-top: 2.5rem;
        width: 32rem;
        height: 16.25rem;
        border: #999 solid 1px;
    }
    .th-item-o {
        background-color: #f2f2f2;
        margin-top: -0.625rem;
        width: 16.25rem;
        margin-left: 0.6rem;
    }
    .th-item-t {
        margin-top: 1.25rem;
        margin-left: 1.9rem;
    }
    .th-item-t select {
        width: 13.75rem;
        height: 2.2rem;
    }
    .th-item-f {
        background-color: #f2f2f2;
        margin-top: -0.625rem;
        width: 15.625rem;
        margin-left: 0.625rem;
    }
    .four {
        margin-top: 3.5rem;
        width: 32rem;
        height: 15rem;
        border: #999 solid 1px;
    }
    .f-i-o {
        margin-top: 1.9rem;
        margin-left: 1.25rem;
        display: flex;
        justify-content: space-between;
        width: 26.875rem;
    }
    .o-t {
        color: blue;
        width: 13.75rem;
        text-align: center;
    }
    .o-t-f {
        width: 13.75rem;
        text-align: center;
        border: #999 solid 1px;
        background-color: white;
    }
    .o-t-s select {
        width: 19.375rem;
        text-align: center;
        height: 2.2rem;
        background-color: white;
    }
    .btna button {
        width: 7.25rem;
        height: 2.5rem;
        margin-left: 8rem;
        margin-top: 2.25rem;
        display: inline-block;
    }

</style>